<template>
  <div class="main">
    <div class="listTop">
      <header class="head">
        <van-icon name="arrow-left" class="reBtn" @click="reBack()" />
        {{ topFont }}
      </header>
      <p class="title">商机信息</p>
      <div class="textBorder">
        <div class="box-title">商机信息</div>
        <div class="text-item">
          <span>商铺名称</span>
          <van-field class="input-t" v-model="value1" placeholder="商铺名称" />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
        <div class="text-item">
          <span>商铺地址</span>
          <van-field class="input-t" v-model="value2" placeholder="商铺地址" />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
        <div class="text-item">
          <span>商机名称</span>
          <van-field class="input-t" v-model="value3" placeholder="商机名称" />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
        <div class="text-item">
          <span>联系方式</span>
          <van-field class="input-t" v-model="value4" placeholder="联系方式" />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
        <div class="text-item" @click="popShow">
          <span>商机提醒时间</span>
          <van-field class="input-t" v-model="value5" placeholder="商机提醒时间" />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
        <div class="text-item">
          <span>商机描述</span>
          <van-field type="textarea" class="input-t" v-model="value6" placeholder="商机描述" rows="3" autosize required />
        </div>
        <div style="width: 100%;height: 1px;background: #e0e0e0;margin-top: 10px;"></div>
      </div>
      <button class="submit" @click="submit">
        {{ buttonFont }}
      </button>
      <img v-if="checked" class="img" alt="" />
      <p v-if="checked" class="tips">意见提交成功，正在跳转回列表页</p>
      <button @click="jump()" class="jump" v-if="checked">立刻跳转</button>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker v-model="currentDate" @cancel="cancel" @confirm="onConfirm" type="date"
        :min-date="minDate" />
    </van-popup>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import Vue from 'vue';
import { Popup, DatetimePicker } from 'vant';
Vue.use(Popup);
Vue.use(DatetimePicker);
import moment from "moment"
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      show: false,
      checked: false,
      minDate: new Date(2019, 10, 1),
      currentDate: new Date(),
      topFont: "商机信息",
      id: "",
      action: "",
      buttonFont: "提交",
      processInstanceId: "",
    };
  },

  mounted() {
    if (this.$route.query) {
      this.action = this.$route.query.action;
      this.id = this.$route.query.taskId;
      this.processInstanceId = this.$route.query.processInstanceId;
      if (this.action == "pass") {
        this.buttonFont = "同意";
        this.font = "同意";
      }
      if (this.action == "nopass") {
        this.buttonFont = "不同意";
        this.font = "不同意";
      }
    }
  },
  methods: {
    ...mapActions({
      completeTask: "pageApi/completeTask",
    }),
    popShow() {
      this.show = true
    },
    cancel() {
      this.show = false
    },
    onConfirm(val) {
      console.log(val)
      this.value5 = moment(val).format('yyyy年MM月DD日')
    },
    tabAct(index) {
      this.act = index;
    },
    reBack() {
      this.$router.go(-1);
    },
    jump() {
      this.$router.push({ name: "main" });
    },
    formatDate(dates) {
      let date = new Date();
      let YY = date.getFullYear() + "-";
      let MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let DD =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      let hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let ss =
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()) +
        "";
      return YY + MM + DD + hh + mm + ss;
    },
    submit() {
      if (this.font == "") {
        this.$toast("请输入审批意见");
        return false;
      }

      this.completeTask({
        loginId:
          this.$route.query.loginId || window.sessionStorage.getItem("loginId"),
        action: this.action,
        taskId: this.id,
        message: this.font,
        processInstanceId: this.processInstanceId,
        procStartTime: this.formatDate(),
      }).then((res) => {
        if (res.data.success) {
          this.$toast("操作成功");
          if (this.action == "pass") {
            this.topFont = "审批通过";
          } else {
            this.topFont = "审批驳回";
          }
          setTimeout(() => {
            this.$router.push({ name: "main" });
          }, 1500);
        } else {
          this.$toast(res.data.error);
        }
      });
      // this.checked=true;
    },
    onLoad() { },
  },
};
</script>

<style lang="scss" scoped type='text/css'>
.main {
  background-color: #f3f3f3;
}

.listTop {
  height: 10rem;
  color: #333;
  background: #fff;

  .head {
    font-size: 3.4rem;
    text-align: center;
    position: relative;
    color: #fff;
    padding: 3rem 0 3rem;
    background: #4673FB;

    .reBtn {
      position: absolute;
      left: 1.5rem;
      top: 2.5rem;
      font-size: 4.8rem;
    }
  }
}

.title {
  color: #333;
  font-size: 2.8rem;
  padding: 3rem 2.4rem;
  font-family: "黑体";
}

.textBorder {
  width: calc(100% - 20px);
  padding: 2rem 2.4rem;
  margin: 0 10px;
  height: 80rem;
  margin-bottom: 10.2rem;
  background: #fff;
  border-radius: 5px;
  position: relative;

  .box-title {
    position: absolute;
    left: -5px;
    top: 5px;
    margin: 0;
    padding: 0 15px;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
    border-radius: 0 13px 13px 0;
    color: #fff;
    background: #4B86F6;
  }

  .text-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;

    span {
      width: 100px;
      font-size: 14px;
    }

    .input-t {
      width: calc(100% - 100px);
      resize: none;
      border-radius: 1rem;
      padding: 1.4rem;
      box-sizing: border-box;
      font-size: 14px;
      border: 1px solid #e0e0e0;
    }
  }

}

.submit {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 8.8rem;
  width: 55rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.jump {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 6.4rem;
  width: 28rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.img {
  width: 40rem;
  height: 40rem;
  display: block;
  margin: 18rem auto 4.8rem;
}

.tips {
  color: #999;
  font-size: 2.8rem;
  margin-bottom: 8rem;
  text-align: center;
}
</style>